<template>
  <div id="login" class="content">
      <div class="login-background">
        <video src="/image/新视频.mp4" autoplay loop muted></video>
      </div>
     <div class="login-window">
       <div class="login-window-logo">
         <img src="https://th.bing.com/th/id/R298d95062203f33449604bd5fcce4c80?rik=XjSI4wVIKr7hlA&riu=http%3a%2f%2fpic34.nipic.com%2f20131019%2f3347542_160540078000_2.jpg&ehk=4bkwY8xLfvgzWuaRE5rPANqyTM8yfAzr1GwL%2fzjQvLc%3d&risl=&pid=ImgRaw" alt="加载失败">
       </div>
       <div class="login-window-input">
         <p class="login-window-input-title">手机号</p>
         <div class="login-window-input-username">
            <i class="el-icon-user-solid"></i>
            <input class="login_text" type="text" placeHolder="请输入您的手机号" v-model="mobile">
         </div>
         <p class="login-window-input-title">密码</p>
         <div class="login-window-input-password">
            <i class="el-icon-unlock"></i>
            <input class="login_text" :type="isLookPassword ? 'text' : 'password'" placeHolder="请输入您的密码" v-model="password">
            <i class="iconfont iconyanjing1" v-if="isLookPassword" @click="handleToLookPassword"></i>
            <i class="iconfont iconyanjing" v-else @click="handleToLookPassword" ></i>
        </div>
        <div class="login_btn">
            <input type="submit" value="登录" @click="handleToLogin">
        </div>
       </div>
     </div>
  </div>
</template>

<script>
export default {
    name: 'login',
    data(){
      return {
        isLookPassword: false,
        mobile: '',
        password: ''
      }
    },
    methods: {
      // 是否显示密码
      handleToLookPassword(){
        this.isLookPassword = !this.isLookPassword
      },

      //登录
      handleToLogin(){
        if(!this.mobile && !this.password){
          this.$message.error('手机号和密码不能为空');
          return;
        }
        if(this.mobile.length != 11){
          this.$message.error('手机号位数不对，请重新输入');
          return;
        }
        if(/\D/.test(this.mobile)){
          this.$message.error('手机号格式不对，请重新输入');
          return;
        }
        let model = {
          mobile: this.mobile,
          password: this.password
        }
        this.$http({
          method: 'post',
          url: '/test/loginByMobile.do',
          data: model
        }).then(res => {
          if(res.data.status == 1){
            console.log(res.data.datas)
            localStorage.setItem('name', res.data.datas.name)
            this.$router.push('/admin')
            return
          }else{
            this.$message.error(res.data.message);
          }
        }).catch(err=>{
          this.$message.error('账号或密码错误，请重试');
        })
      }
    }
}
</script>

<style lang="scss" scoped>
#login{
  .login-background{
    width: 100%;
    height: 100%;
    position: flex;
    left: 0;
    top: 0;
    overflow: hidden;
    video{
      width: 130%;
    }
  }
  .login-window{
    width: 350px;
    height: 380px;
    border-radius: 8px;
    background: white;
    position: absolute;
    right: 120px;
    top: 50%;
    margin-top: -190px;
    transition: 1s;
    &>div{
      margin: 0 45px;
    }
    &:hover{transform: translateY(-5px);box-shadow: 0 6px 15px #8a8a8a;}

    .login-window-logo{
      width: 200px;
      height: 60px;
      overflow: hidden;
      position: relative;
      img{
        width: 200px;
        height: auto;
        position: absolute;
        top: -50px;
        }
      margin: 22px 40px;
    }

    .login-window-input{
      .login-window-input-title{
        font-size: 12px;
        color:#686865;
      }
      .login-window-input-password,.login-window-input-username{
        width: 260px;
        height: 40px;
        background: #e5e5e5;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 30px;
        display: flex;
        align-content: center;
        i{
          padding:13px;
          font-size: 14px/14px;
          color:#879ca4;
        }
        input{
          border: none;
          background: #e5e5e5;
          outline: none;
          font-size: 14px;

        }
      }
      .login_btn{
        input{
          height: 40px;
          width: 100%;
          margin-top: 10px;
          border-radius: 5px;
          background: #436902;
          border: none;
          outline: none;
          color:white;
          font-size: 12px;
          &:active{
            background: #92cc20;
          }
        }
      }
    }
  }
}
</style>